import React, { Component } from 'react'
import {baseUrl,search} from '../../api/base'
import {connect} from 'react-redux'
import Searchhead from './searchhead/searchhead'
import Searchlist from './searchlist/searchlist'
import Loadmore from '../../components/loadmore/loadmore'
class Search extends Component {
    state={
        list:[],
        hasMore:false,
        page:0
    }
    componentDidMount(){
        console.log('加载')
        console.log(this.props.city)
    
        this.getdata()
    }
    componentDidUpdate(prevProps){
        console.log('刷新')
        if(prevProps.match.params.keyword!==this.props.match.params.keyword){
            //再次搜索时初始化page,list
            
            this.state.page=0;
            this.state.list=[];
            document.documentElement.scrollTop=0;
            this.getdata()
           
           
            // this.setState({
            //     page:0,
            //     list:[]
            // })
            // this.getdata()
            console.log(this.props.city)
            
        }
    }
    getdata=(fn)=>{
        console.log(this.props.city)
        fetch(baseUrl+search+'/'+this.props.city+'/' + this.props.match.params.keyword+'/'+this.state.page)
        .then(res=>res.json())
        .then(res=>{
            console.log('刷新')
            this.setState({
                list:[...res.data,...this.state.list],
                hasMore:res.hasMore,
                page:this.state.page+1
            })
            //回调函数
            if(fn){
                fn(true)
            }
        })
        console.log(this.props.match.params.keyword)
    }
    render() {
        console.log(this.props.match.params.keyword)
        console.log(this.props.city)
        return (
            <div style={{paddingTop:'1.1rem'}}>
                {/* //头部信息 */}
                <Searchhead history={this.props.history}/>
                {/* 列表信息 */}
                <Searchlist list={this.state.list}/>
                {this.state.hasMore
                ?
                <Loadmore 
                    getdata={this.getdata}
                />
                :
                <div>
                        <hr/><hr/>
                        <p style={{textAlign:'center'}}>
                            我是有底线的
                        </p>
                </div>}
            </div>
        )
    }
}
function mapStateToProps(state){
    return{
        city:state.city
    }
}
export default connect(mapStateToProps)(Search)